<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="app">
	<div class="container">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title text-center">选手比赛打分</h3>
			</div>
			<div class="panel-body">
				<div class="row" style="margin-top: 50px;">
					<div class="col-xs-2 text-right" style="font-size: 18px;">
						选手：
					</div>
					<div id="id" class="col-xs-1 text-center" style="width: 100px; font-size: 20px; border: #000 1px solid;">
						{{id}} 号
					</div>
					<div class="col-xs-2 text-right" style="font-size: 18px;">
						姓名：
					</div>
					<div id="name" class="col-xs-1 text-center" style="width: 100px; font-size: 20px; border: #000 1px solid;">
						{{name}}
					</div>
					<div class="col-xs-2 text-right" style="font-size: 18px;">
						地区：
					</div>
					<div id="origin" class="col-xs-4 text-center" style="width: 150px; font-size: 20px; border: #000 1px solid;">
						{{origin}}
					</div>
				</div>
			</div>
			<div class="row" style="margin-top: 50px;">
				<div class="col-xs-3 text-right" style="font-size: 18px;">裁判打分</div>
				<div class="col-xs-9">
					<form action="conn.php">
						<input type="text" name="score">
						<input type="text" v-bind:value="id" name="id" hidden>
						<input type="submit" value="提交">
					</form>
					<!-- <button type="submit" style="margin-left: 40px;" value="确定">确定</button> -->
				</div>
			</div>
			<div class="row" style="margin: 50px 0px 50px 0px;">
				<div class="col-xs-4 text-center">
					<button type="button" value="" class="btn btn-info" v-on:click="up()">上一个</button>
				</div>
				<div class="col-xs-4 text-center">
					<button type="button" value="" class="btn btn-info" v-on:click="down()">下一个</button>
				</div>
				<div class="col-xs-4 text-center">
					<button type="button" class="btn btn-success" id="myButton4"><a href="playerList.php">成绩表</a>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>
</div>
</body>
<script type = "text/javascript">
	new Vue({
		el: '#app',
		data : {
			id:1
		},
		methods:{
			up:function () {
				this.id--;
				axios
						.post('select.php?q='+this.id)
						.then(function (response) {
							$("#id").text(response.data[0][0]+"号")
							$("#name").text(response.data[0][1])
							$("#origin").text(response.data[0][2])
						})
						.catch(function (error) { // 请求失败处理
							console.log(error);
						});
			},
			down:function () {
				this.id++;
				axios
						.post('select.php?q='+this.id)
						.then(function (response) {
							$("#id").text(response.data[0][0]+"号")
							$("#name").text(response.data[0][1])
							$("#origin").text(response.data[0][2])
						})
						.catch(function (error) { // 请求失败处理
							console.log(error);
						});
			}
		},
		mounted () {
			axios
					.post('select.php?q='+this.id)
					.then(function (response) {
						$("#id").text(response.data[0][0]+"号")
						$("#name").text(response.data[0][1])
						$("#origin").text(response.data[0][2])
					})
					.catch(function (error) { // 请求失败处理
						console.log(error);
					});
		}
	})
</script>
</html>
